<template>
  <div class="home">
    <dv-loading v-show="loading">Loading...</dv-loading>
    <dv-full-screen-container style="width: 99%; height: 95%; font-size: 16px !important">
      <dv-border-box-1 class="first">
        <div ref="main" id="main" v-init="opt"></div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
// @ is an alias to /src
import * as echarts from 'echarts';
import axios from 'axios';
export default {

  data() {
    return {
      loading: false,
      opt: {}
    }
  },
  directives: {
    init: {
      // inserted: 在dom元素成功插入父节点时的钩子函数
      inserted(el, binding, vnode) {
        let xlabel = []
        let xdata = []
        let that = vnode.context

        that.loading = true
        axios.get('/api/hello.action')
          .then(response => {
            // 请求成功处理
            console.log(response.data.data);
            xlabel = response.data.data.map(item => item.job)
            xdata = response.data.data.map(item => item.avgscore)

            console.info(document.getElementById('main'))
            var myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
              title: {
                text: 'ECharts 入门示例'
              },
              tooltip: {},
              xAxis: {
                data: xlabel
              },
              yAxis: {},
              series: [
                {
                  name: '销量',
                  type: 'bar',
                  data: xdata
                }
              ]
            })
          })
          .catch(error => {
            // 请求失败处理
            console.info(error);
          }).finally(() => {
            that.loading = false
          })

      }
    }
  },
  name: 'HomeView',
  mounted() {




  }
}

</script>
<style>
div#main {
  width: 500px;
  height: 500px;
}

.first {
  width: 500px;
  height: 500px;
}
</style>